<template>
  <div class="box">
    <header class="header">
      <header>
        <van-nav-bar
          :title="totalNum > 0 ? '购物车' + totalNum : '购物车'"
          left-arrow
          @click-left="$router.back()"
        />
      </header>
    </header>
    <div class="content">
      <van-empty description="购物车空空如也" v-if="CartList.length === 0">
        <van-button round type="danger" @click="$router.push('/kind')" class="bottom-button">去购物</van-button>
      </van-empty>
      <div class="cart" v-else>
        <van-swipe-cell
          v-for="(item, index) of CartList"
          :key="index"
        >
          <van-row class="row">
            <van-col span="2" class="col">
              <van-checkbox v-model="item.flag" class="mycheckbox" @change="selectOneFn(item.cartid, item.flag)"></van-checkbox>
            </van-col>
            <van-col span="22">
              <van-card
                :tag="item.discount + '折'"
                :price="item.originprice * item.discount * 0.1"
                desc="描述信息"
                :title="item.proname"
                :thumb="item.img1"
                :origin-price="item.originprice"
              >
                <template #num>
                  <van-stepper @change="updateNumFn(item.cartid, item.num)" v-model="item.num" theme="round" button-size="22" disable-input />
                </template>
              </van-card>
            </van-col>
          </van-row>
            <template #right>
              <van-button @click="deleteItem(item.cartid)" square type="danger" text="删除" class="delete-button"/>
            </template>
        </van-swipe-cell>
        <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit">
          <van-checkbox v-model="checked" @click="selectAllFn">全选</van-checkbox>
        </van-submit-bar>
      </div>
      <van-divider>猜你喜欢</van-divider>
      <pro-list :list="recommendList"></pro-list>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Col,
  Row,
  Empty,
  Button,
  NavBar,
  Card,
  Stepper,
  SwipeCell,
  SubmitBar,
  Checkbox,
  Divider,
  Dialog
} from 'vant'

import {
  getCartList,
  remove,
  updateNum,
  selectone,
  selectall,
  getRecommendList
} from '@/api/cart'

import ProList from '@/components/ProList'
import { addOrder } from '../../api/order'

Vue.use(Col)
Vue.use(Row)
Vue.use(Empty)
Vue.use(Button)
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Stepper)
Vue.use(SwipeCell)
Vue.use(SubmitBar)
Vue.use(Checkbox)
Vue.use(Dialog)
Vue.use(Divider)

export default {
  name: 'cart',
  components: {
    ProList
  },
  computed: {
    totalNum () {
      return this.CartList.reduce((sum, item) => {
        return item.flag ? item.num + sum : sum + 0
      }, 0)
    },
    totalPrice () {
      return this.CartList.reduce((sum, item) => {
        return item.flag ? item.num * item.originprice + sum : sum + 0
      }, 0) * 100
    }
  },
  data () {
    return {
      CartList: [],
      recommendList: [],
      checked: true,
      flag: true
    }
  },
  methods: {
    onSubmit () {
      // this.$router.push('/order')
      console.log('确定订单')
      addOrder({
        userid: localStorage.getItem('userid')
      }).then(res => {
        console.log(res.data)
        this.$router.push('/order/' + res.data.time)
      })
    },
    getCartListFn () {
      getCartList({ userid: localStorage.getItem('userid') }).then(res => {
        if (res.data.code === '10020') {
          this.flag = true
          this.cartList = []
        } else {
          this.flag = false
          this.cartList = res.data.data
          this.checked = this.cartList.every(item => item.flag)
        }
        this.CartList = res.data.data
      })
    },
    deleteItem (cartid) {
      Dialog.confirm({
        message: '便宜不等人，请三思而行',
        confirmButtonText: '残忍离去'
      }).then(() => {
        remove({ cartid }).then(res => {
          this.getCartListFn()
        })
      }).catch(() => {})
    },
    updateNumFn (cartid, num) {
      updateNum({ cartid, num }).then(() => {
        this.getCartListFn()
      })
    },
    selectAllFn () {
      selectall({
        userid: localStorage.getItem('userid'),
        type: this.checked
      }).then(() => {
        this.getCartListFn()
      })
    },
    selectOneFn (cartid, flag) {
      selectone({ cartid, flag }).then(() => {
        this.getCartListFn()
      })
    }
  },
  mounted () {
    if (localStorage.getItem('isLogin') === 'true') {
      this.getCartListFn()
    } else {
      this.$router.push('/login')
    }
    getRecommendList().then(res => {
      this.recommendList = res.data.data
    })
  }
}
</script>

<style lang="stylus">
.bottom-button {
  width: 160px;
  height: 40px;
}
.delete-button {
  height: 100%;
}
.mycheckbox
  margin-top 42px
  margin-left 10px
.van-card
  background-color #ffffff
</style>
